import { useFlow } from '@/hooks/useFlow';
import { useGraph } from '@/hooks/useGraph';
import { Model } from '@antv/x6';
import { PropType } from 'vue';
import { EdgeDrawer } from '../EdgeDrawer';
import './index.scss';

export const GraphContainer = defineComponent({
  props: {
    graphJson: {
      type: Object as PropType<Model.FromJSONData>,
      default: null
    },
    flowState: {
      type: String as PropType<'edit' | 'view'>,
      default: 'edit'
    }
  },
  setup(props) {
    const { container, graph } = useGraph(true);
    const { setFlowState } = useFlow();
    setFlowState('edit');

    watchEffect(() => {
      setFlowState(props.flowState);
    });

    watchEffect(() => {
      if (props.graphJson) {
        graph.value?.fromJSON(props.graphJson);
      }
    });

    return () => (
      <div class="graph-container flex bg-fill-2 rounded-8px">
        <EdgeDrawer />
        <div class="flex-1 !h-full !w-full" ref={container}></div>
      </div>
    );
  }
});
